<template>
  <div class="upload-form">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="上传图片">
        <ImgUpload ref="imgUpload" :pre-imgs="pres" file-type="file" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="getUploadRes">提交表单</el-button>
  </div>
</template>

<script>
import ImgUpload from "@/components/BaseFileUpload";

export default {
  name: "uploadForm",
  components: { ImgUpload },
  data() {
    return {
      form: {},
      pres: [],
    };
  },
  mounted() {
    // 图片回显
    this.pres = [
      "https://p3-passport.byteimg.com/img/user-avatar/667cc53af70bda81a63f15b78115db66~180x180.awebp",
      "https://p3-passport.byteimg.com/img/user-avatar/672b284d8eab1749a814ed55ea46d323~180x180.awebp",
    ];
  },
  methods: {
    async getUploadRes() {
      // 校验
      const files = this.$refs.imgUpload.getFileList();
      if (files.length < 1) {
        console.log("请至少上传一张图片");
        return;
      }
      // 上传
      try {
        const files1 = await this.$refs.imgUpload.mySubmit("url", "fileName");
        this.form.frontPic = files1.join(",");
      } catch (error) {
        console.log("图片上传失败");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.upload-form {
  width: 500px;
}
</style>
